<template>
  <el-table :data="tableData" style="width: 100%">
    <el-table-column label="日期" width="180">
      <template slot-scope="scope">
        <el-select
          v-model="scope.row.select"
          @change="handleSelect(scope.row)"
          placeholder="请选择"
        >
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </template>
    </el-table-column>
    <el-table-column label="姓名" width="180">
      <template slot-scope="scope">
        <el-input
          v-model="scope.row.name"
          @change="handleInput(scope.row)"
          placeholder="请输入内容"
        ></el-input>
      </template>
    </el-table-column>
    <el-table-column prop="num" label="库存"> </el-table-column>
  </el-table>
</template>

<script>
export default {
  data() {
    return {
      options: [
        {
          value: "选项1",
          label: "黄金糕",
        },
        {
          value: "选项2",
          label: "双皮奶",
        },
        {
          value: "选项3",
          label: "蚵仔煎",
        },
        {
          value: "选项4",
          label: "龙须面",
        },
        {
          value: "选项5",
          label: "北京烤鸭",
        },
      ],
      tableData: [
        {
          date: "2016-05-02",
          name: "",
          address: "上海市普陀区金沙江路 1518 弄",
          select: "",
          num: "",
        },
        {
          date: "2016-05-04",
          name: "",
          address: "上海市普陀区金沙江路 1517 弄",
          select: "",
          num: "",
        },
        {
          date: "2016-05-01",
          name: "",
          address: "上海市普陀区金沙江路 1519 弄",
          select: "",
          num: "",
        },
        {
          date: "2016-05-03",
          name: "",
          address: "上海市普陀区金沙江路 1516 弄",
          select: "",
          num: "",
        },
      ],
    };
  },
  methods: {
    handleInput(row) {
      console.log(row);
      this.setNum(row);
    },
    handleSelect(row) {
      console.log(row);
      this.setNum(row);
    },
    setNum(row) {
      if (row.select && row.name) {
        row.num = "1";
      } else {
        row.num = "";
      }
    },
  },
};
</script>
